<template>
	<div id="app">
		<div class="title">用户管理</div>
		<el-row class="tableBtnTop">
			<el-select v-model="type" placeholder="请选择" class="filter">
				<el-option label="用户昵称" value="user_name"></el-option>
				<el-option label="用户手机" value="user_tel"></el-option>
				<el-option label="用户ID" value="user_id"></el-option>
			</el-select>
			<div class="search">
				<el-input placeholder="请输入内容" @keyup.enter.native="onSearch" v-model.trim="keyword">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<el-button class="f1" @click="onDisableUser">设备封号</el-button>
		</el-row>

		<user-list :tableData="tableData" :loading="loading"></user-list>
		<div class="paginationBlock">
			<el-pagination @current-change="changePage" layout="prev, pager, next, total" :total="count" :current-page="page" :page-size="pageSize" hide-on-single-page></el-pagination>
		</div>


		<el-dialog title="提示" :visible.sync="deviceShow" width="500px">
			<el-form label-position="top" v-loading="disableLoading">
					<el-form-item label="请输入设备号，以便诛连九族">
							<el-input v-model.trim="device_id"></el-input>
					</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
					<el-button @click="deviceShow = false">取 消</el-button>
					<el-button type="primary" @click="disableUser">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import fetch from '@/api/axios';
import {sysToYuan} from '@/utils/transPrice';
import {tsToDateFormat} from '@/utils/tsToDateFormat';
import UserList from  './userList';
export default {
	components: {
		'user-list': UserList
	},
	data() {
		return {
			loading: false,
			page: 1,
			pageSize: 10,
			count: 0,
			type: 'user_name',
			keyword: '',
			tableData:[],

			deviceShow:false,
			disableLoading: false,
			device_id: '',
		}
	},
	filters: {
		transPrice(p){
			return sysToYuan(p, 2);
		},
		dateFormat(t){
			return tsToDateFormat(t, 'yyyy-MM-dd hh:mm');
		},
	},
	created(){
		this.page = parseInt(this.$route.params.page || 1);
		if(this.$route.params.type){
			this.type = this.$route.params.type;
		}
		this.keyword = this.$route.params.keyword;
		this.getList();
	},
	methods: {
		onSearch(){
			let page = 1;
			let type = this.type;
			let keyword = this.keyword;
			let searchStr = '';
			if(type && keyword){
				searchStr = `/${type}/${keyword}`;
			}
			this.page = 1;
			this.getList();
			this.$router.push(`/user/page/${page}${searchStr}`);

		},
		getList(){
			let _this = this;
			this.loading = true;
			fetch.get('/api/console/user/info',{
				page: _this.page,
				type: _this.type,
				keyword: _this.keyword
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.count = data.data.count;
					_this.pageSize = data.data.pagesize;
					_this.tableData = [...data.data.result];
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		changePage(page){
			let type = this.type;
			let keyword = this.keyword;
			let typeStr = !type || !keyword ? '' : `/${type}/${keyword}`;
			this.page = page;
			this.$router.replace(`/user/page/${page}${typeStr}`);
			this.getList();
		},
		onDisableUser(){
			this.device_id = '';
			this.deviceShow = true;
		},
		disableUser(){
			let _this = this;
			let device_id = this.device_id;
			if(device_id == ''){
				this.$message.error('设备号不能为空，请输入设备号');
				return false;
			}
			this.disableLoading = true;
			fetch.post('/api/console/user/kill/device', {
				device_id: _this.device_id
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.deviceShow = false;
					_this.$message.success(data.data);
				}else{
					_this.$message.error(data.data.info || data.message);
				}
			}).catch(err=>{
				_this.$message.error('网络链接失败，请稍后重试');
			}).finally(()=>{
				_this.disableLoading = false;
			});
		},
	},
	mounted() {

	},
	watch: {
		'$route':function(to){
			let params = to.params;
			this.page = parseInt(params.page);
			if(params.type){
				this.type = params.type
			}
			this.keyword = params.keyword || '';
		}
	}
}
</script>
<style lang="scss" scoped>
	.colText{
		float:right;
		font-size:14px;
		margin-left:20px;
		line-height:40px;
		color: #606266;
	}
	.gender {
		width: 26px;
		height: 26px;
	}
	.leav{
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-top:-2px;
		margin-right:10px;
	}
</style>